<!--  -->
<template>
    <a-modal v-model="visible" title="编辑状态" destroyOnClose  :mask-closable="false"  @ok="handleOk" :z-index="2600" :width="1260" centered :class="['c-dialog-box ed-dialog-box mystatus']">
          <a-row
          v-for="(item, index) in eventDetail"
          :key="item.id"
          class="ed-details-item-box"
          :class="{ 'ed-details-item-box-active': itemActiveIndex === index }"
        >
          <a-col
            :span="24"
            class="ed-details-item-li"
            :class="{
              'ed-details-item-sub-active':
                itemActiveIndex === index && itemActiveCIndex === -1
            }"
          >
            <a-row
              class="d-flex-i ai-center cu-pointer pt-5 pb-5 ed-details-item-li-in"
            >
              <a-col :span="2">
                <noticePriorityIcon
                  :is-etops="item.isEtops"
                  :priority="item.priority"
                  :msg-type="item.name"
                />
              </a-col>
              <a-col :span="2">
                <div v-if="item.msgType === 'Alert'" class="fw-b">
                  {{ item.msgType }}
                </div>
                <span
                  v-if="item.msgType !== 'Alert'"
                  :class="[item.msgType === 'Alert' ? '' : 'fw-b']"
                >{{ item.name }}</span>
              </a-col>
              <a-col :span="5">
                <a-row>
                  <a-col :span="24">
                    <span class="text-color-5a87f7">{{
                      item.code || '--'
                    }}</span>
                  </a-col>
                  <!-- <a-col v-if="item.msgType !== 'Alert'" :span="12">
                    <span class="text-color-5a87f7">{{
                      item.activity ? activeHandler(item.activity) : '--'
                    }}</span>
                  </a-col> -->
                </a-row>
              </a-col>
              <a-col :span="15">
                <span
                  class="fs-13 text-color-5a87f7 text-over"
                  :title="item.description"
                >{{ item.description }}</span>
              </a-col>

        
            </a-row>
         
          </a-col>

          <template v-if="item.eventDetails && item.eventDetails.length > 0">
            <a-col
              v-for="(ci, cIndex) in item.eventDetails"
              :key="ci.id"
              :span="24"
              :class="[
                'ed-deitals-sub-item-box',
                ci.name === 'MMSG' ? 'cu-pointer' : '',
                itemActiveIndex === index && itemActiveCIndex === cIndex
                  ? 'ed-details-item-sub-active'
                  : ''
              ]"
            >
              <a-row>
                <a-col :span="24">
                  <a-row
                    class="d-flex-i ai-center cu-pointer pt-5 pb-5 ed-details-item-li-in"
                    style="width: 100%"
                  >
                    <a-col :span="2" class="d-flex">
                      <noticePriorityIcon
                        :is-etops="ci.isEtops"
                        :priority="ci.priority"
                        :msg-type="ci.name"
                      />
                    </a-col>
                    <a-col :span="2">
                      <div v-if="ci.msgType === 'Alert'" class="fw-b">
                        {{ ci.msgType }}
                      </div>
                      <span
                        v-if="ci.msgType !== 'Alert'"
                        :class="[ci.msgType === 'Alert' ? '' : 'fw-b']"
                      >{{ ci.name }}</span>
                    </a-col>
                    <a-col :span="5">
                      <a-row>
                        <a-col :span="24">
                          <span class="text-color-5a87f7">{{
                            ci.code || '--'
                          }}</span>
                        </a-col>
                        <!-- <a-col v-if="ci.msgType !== 'Alert'" :span="12">
                          <span class="text-color-5a87f7">{{
                            ci.activity ? activeHandler(ci.activity) : '--'
                          }}</span>
                        </a-col> -->
                      </a-row>
                    </a-col>
                    <a-col :span="15">
                      <span
                        class="fs-13 text-color-5a87f7 text-over"
                        :title="ci.description"
                      >{{ ci.description }}</span>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-col>
          </template>
          </a-row>
         <div class="form-box">
             <a-form class="my-form" :form="form" :label-col="{ span: 24 }" :wrapper-col="{ span:24}"  layout="vertical">
                <a-form-item label="状态码"  v-show="false">
                    <a-input disabled  v-decorator="['statusCode']" >
                    </a-input>
                </a-form-item>
                <a-form-item label="机号" v-show="false">
                    <a-input disabled  v-decorator="['tailNumber',{initialValue:currentRow.tailnumber}]" >
                    </a-input>
                </a-form-item>
               <a-form-item label="推迟至" v-if="statusCode=='delay'">
                   <a-date-picker show-time  v-decorator="['delayTo']" valueFormat="YYYY-MM-DD hh:mm:ss"/>
                </a-form-item>
                <!-- 监控的start -->
                 <a-row  v-if="statusCode=='monitor'" :gutter="10">
                    <a-col :span="5">
                        <a-form-item label="飞行日">
                         <a-input  v-decorator="['flugTag',{initialValue:'3'}]" ></a-input>
                        </a-form-item>
                    </a-col>
                     <a-col :span="5">
                      <a-form-item label="日历日">
                        <a-input  v-decorator="['calendarDay']" ></a-input>
                        </a-form-item>
                     </a-col>
                      <a-col :span="5">
                      <a-form-item label="航段">
                        <a-input  v-decorator="['leg']" ></a-input>
                        </a-form-item>
                     </a-col>
                      <a-col :span="5">
                      <a-form-item label="在X个航段出现X次">
                        <a-input  v-decorator="['legTh']" ></a-input>
                        </a-form-item>
                     </a-col>
                      <a-col :span="4">
                      <a-form-item label=",触发待处理">
                        <a-input  v-decorator="['appearNum']" ></a-input>
                        </a-form-item>
                     </a-col>
                </a-row>
                  <a-form-item label="监控类型" v-if="statusCode=='monitor'">
                       <a-select v-decorator="['monitoringType']" @change="change_monitoringType">
                         <a-select-option key="1" value="convention">常规监控</a-select-option>
                         <a-select-option key="2" value="str">串件观察</a-select-option>
                         <a-select-option key="3" value="transaction">办理保留</a-select-option>
                       </a-select>
                </a-form-item>
                 <a-row  v-if="statusCode=='monitor'&&monitoringType=='str'" :gutter="10">
                    <a-col :span="5">
                        <a-form-item label="关联飞机">
                         <a-input  v-decorator="['ariplane']" ></a-input>
                        </a-form-item>
                    </a-col>
                     <a-col :span="5">
                      <a-form-item label="及航班号">
                        <a-input  v-decorator="['flightNo']" ></a-input>
                        </a-form-item>
                     </a-col>
                </a-row>
                <a-row  v-if="statusCode=='monitor'&&monitoringType=='transaction'" :gutter="10">
                  <a-col :span="5">
                    <a-form-item label="保留单号">
                      <a-select v-decorator="['orderNoPre']">
                        <a-select-option key="1" value="DD">DD</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                     <a-col :span="5">
                      <a-form-item label="''" class="bb">
                        <a-input  v-decorator="['orderNoContent']" ></a-input>
                      </a-form-item>
                     </a-col>
                </a-row>
                <!-- 监控的end -->
                <!-- 更新的 -->
                <a-row  v-if="statusCode=='update'||statusCode=='close'" :gutter="10">
                    <a-col :span="12">
                        <a-form-item label="Work Order">
                         <a-input  v-decorator="['workOrder']" ></a-input>
                        </a-form-item>
                    </a-col>
                     <a-col :span="12">
                      <a-form-item label="完成时间">
                        <a-date-picker show-time  v-decorator="['finishDate']" valueFormat="YYYY-MM-DD hh:mm:ss"/>
                        </a-form-item>
                     </a-col>
                </a-row>
                  <a-form-item label="故障排除" v-if="statusCode=='update'">
                       <a-select v-decorator="['troubleShooting']" @change="change_troubleShooting">
                         <a-select-option key="1" value="rcomponents">更换部件</a-select-option>
                         <a-select-option key="2" value="test">测试</a-select-option>
                         <a-select-option key="3" value="mline">量线检查</a-select-option>
                         <a-select-option key="4" value="mel">MEL放行</a-select-option>
                       </a-select>
                </a-form-item>
                  <a-row  v-if="statusCode=='update'&&troubleShooting=='rcomponents'" :gutter="10">
                    <a-col :span="12">
                        <a-form-item label="拆下">
                         <a-textarea  v-decorator="['removeThe']" ></a-textarea>
                        </a-form-item>
                    </a-col>
                     <a-col :span="12">
                      <a-form-item label="装上">
                        <a-textarea  v-decorator="['mountUp']"/>
                        </a-form-item>
                     </a-col>
                </a-row>
                 <a-form-item label="量线结果" v-if="statusCode=='update'&&troubleShooting=='mline'">
                       <a-textarea  v-decorator="['volumeLineResults']"  >
                       </a-textarea>
                </a-form-item>
                   <a-form-item label="后续处理计划" v-if="statusCode=='update'&&troubleShooting=='mel'">
                       <a-select v-decorator="['nextPlan']">
                         <template v-for="v in NextPlanList">
                             <a-select-option :value="v.value" :key="v.value">
                                {{v.label}}
                            </a-select-option>
                        </template>
                       </a-select>
                </a-form-item>
                 <!-- 更新的end -->
                 <a-form-item label="后续计划" v-if="statusCode=='delay'">
                       <a-textarea  v-decorator="['nextPlan']"  >
                       </a-textarea>
                </a-form-item>
                <a-form-item label="AHM Benefit" v-if="statusCode=='processing'||statusCode=='delay'||statusCode=='update'||statusCode=='monitor'||statusCode=='close'">
                  <a-select
                        v-decorator="['ahmBenefit']"
                        placeholder="AHM Benefit"
                    >
                        <template v-for="v in benefitList">
                             <a-select-option :value="v.value" :key="v.value">
                                {{v.label}}
                            </a-select-option>
                        </template>
                       
                       
                    </a-select>
                </a-form-item>
                <a-form-item label="Action Taken"  v-if="statusCode=='processing'||statusCode=='delay'||statusCode=='update'||statusCode=='monitor'||statusCode=='close'">
                    <a-checkbox-group
                        v-decorator="['actionTaken']"
                        style="width: 100%;"
                    >
                        <a-row>
                            <template v-for="v in ActionList">
                                 <a-col :span="12">
                                    <a-checkbox :value="v.value">
                                        {{v.label}}
                                    </a-checkbox>
                                 </a-col>
                            </template>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>

                <a-form-item label="关闭事件"  v-if="statusCode=='update'">
                      <a-radio-group  v-decorator="['closeEvent']" :options="options" />
                </a-form-item>
                 <a-form-item label="关闭事件"  v-if="statusCode=='close'">
                      <a-radio-group  v-decorator="['closeEvent']" :options="options1" />
                </a-form-item>

                 <a-form-item label="Additional Comments"  v-if="statusCode=='processing'||statusCode=='update'||statusCode=='monitor'">
                       <a-textarea  v-decorator="['additional_comments']" >
                       </a-textarea>
                </a-form-item>

                  <a-form-item label="推迟原因" v-if="statusCode=='delay'">
                       <a-textarea  v-decorator="['delayReason']" >
                       </a-textarea>
                </a-form-item>
                  <a-form-item  v-if="statusCode=='delay'||statusCode=='update'||statusCode=='monitor'||statusCode=='close'">
                      <a-upload :file-list="[]" multiple :before-upload="beforeUpload">
                            <a-button
                            size="small"
                            type="primary"
                            ghost
                            :loading="uploadLoading"
                            >
                            上传
                            </a-button>
                    </a-upload>
                </a-form-item>
            </a-form>
             <div class="file-list">
                <template v-for="(v,i) in fileList">
                    <div :key="v.uid">
                        {{v.name}}
                        <a-icon type="delete" class="del" @click="del(i)"/>
                    </div>
                </template>
            </div>
         </div>
    </a-modal>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
import { getBenefitAndtakenApi,addStatusDataApi,myuploadApi } from '@/services/fraMonitoring'
import reqwest from 'reqwest';
export default {
    name:'statusProcessing',
    props:{
        statusCode:String,
        eventId:String,
        currentRow:Object
    },
    data(){
        return {
            form: this.$form.createForm(this, { name: 'm-eventstatus' }),
            visible:false,
            itemActiveIndex: 0,
            itemActiveCIndex: -1,
            troubleShooting:'',
            monitoringType:'',
            benefitList:[],
            ActionList:[],
            fileList:[],
            NextPlanList:[],
             options:[
                        {
                            label: '关闭(解决)', value: 'resolve' 
                        },
                        {
                            label: '关闭(忽略)', value: 'resoignorelve' 
                        },
                        {
                            label: '关闭(已过期)', value: 'expire' 
                        },
                        {
                            label: '关闭(干扰信息)', value: 'noise_info' 
                        },
                        {
                            label: '不关闭', value: 'no_shutdown' 
                        },
                    ],
           options1:[
                        {
                            label: '关闭(解决)', value: 'resolve' 
                        },
                        {
                            label: '关闭(忽略)', value: 'resoignorelve' 
                        },
                        {
                            label: '关闭(已过期)', value: 'expire' 
                        },
                        {
                            label: '关闭(干扰信息)', value: 'noise_info' 
                        }
                    ]
           }
    },
    computed: {
        ...mapState('eventMonitoring', [
        'eventDetailLoading',
        'eventDetail',
        'addCommentLoading',
        'uploadLoading',
        'removeFileLoading',
        'eventBySlopeLoading',
        'eventBySlope',
        'eventList',
        'dataType',
        'dataTypeIndex'
        ]),
    },
    methods:{
        del(i){
            this.fileList.splice(i,1)
            
            },
        change_troubleShooting(p){
            this.troubleShooting = p
        },
        change_monitoringType(p){
          this.monitoringType = p
        },
        handleOk(){
            // 提交表单
            this.form.validateFields((err, values) => {
                if (!err) {
                console.log('Received values of form: ', values);
                    addStatusDataApi({
                        code:this.statusCode,
                        eventId:this.eventId,
                        eventDealItem:values
                    }).then(res=>{
                        if(res.code==200){
                            this.$message.success(res.message)
                            this.visible = false
                            if(this.fileList.length>0){
                                 const { fileList } = this;
                                const formData = new FormData();
                                formData.append('rgion', this.statusCode);
                                formData.append('dataid', res.data.id);
                                formData.append('files', fileList);
                               fileList.forEach(file => {
                                    formData.append('files', file);
                                });
                               return reqwest({
                                url: process.env.VUE_APP_API_BASE_URL+'/toolapi/uploadfiles',
                                   method: 'post',
                                  processData: false,
                                  data: formData,
                                })
                            }
                        }else{
                             this.$message.warning(res.message)
                        }
                    }).catch(e=>{
                          this.$message.warning('添加失败')
                    }).finally(()=>{
                        this.fileList.length=0
                        this.$listeners.update_status()
                        this.$bus.$emit('exec_update')
                    })
                }
            });
        },
         beforeUpload(file,fileList) {
            // console.log('我是文件',file,fileList)
            this.fileList.push(file);
            // const { fileList } = this;
            // const formData = new FormData();
            // fileList.forEach((file) => {
            //     formData.append('file', file);
            // });
    
      return false;
    },
       async getBenefitList(){
            const res = await getBenefitAndtakenApi(1)
            if(res.code == 200){
                this.benefitList = res.data
            }
        },
        async getActionList(){
            const res = await getBenefitAndtakenApi(2)
            if(res.code == 200){
                this.ActionList = res.data
            }
        },
         async getNextPlanList(){
            const res = await getBenefitAndtakenApi(3)
            if(res.code == 200){
                this.NextPlanList = res.data
            }
        },
        open(){
            this.visible = true
              this.getBenefitList()
              this.getActionList()
              this.getNextPlanList()
               setTimeout(()=>{
                 this.form.setFieldsValue({
                    'statusCode':this.statusCode
                })
               },200)
        }
    },
    created(){
      
    }
}
</script>
<style  lang="less">
     div.ant-select-dropdown.ant-select-dropdown--single,div.ant-calendar-picker-container.ant-calendar-picker-container-placement-bottomLeft  {
        z-index: 2700 !important;
    }
</style>

<style lang="less" scoped>
.c-dialog-box .ant-modal-header{
    height: 60px;
}
.mystatus {
    /deep/.ant-modal-header{
    height: 56px;
}
}
.form-box{
      background-color: #fff;
.file-list{
    margin: 0 auto;
    padding-top: 0;
    padding: 10px;
    width: 60%;
    .del{
        margin-left: 20px;
        cursor: pointer;
        &:hover{
            color: #4651B5;
            transform: scale(1.5);

        }
    }
}
.my-form{
  
    margin: 0 auto;
    padding: 10px;
    width: 60%;
    .ant-row.ant-form-item{
        display: flex;
        flex-direction: column;
    }
}
}
/deep/.bb{
  >div:nth-child(1){
    opacity: 0;
  }
}
</style>